<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>抢红包</title>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<style type="text/css">
			body{
				background: url(images/homePage/bj.png) no-repeat;
				background-size:100% 100% ;
				width: 100%;
				height: 100vh;
			}
			#swrapper {
				text-align: center;
				padding-top: 19vh;
			}
			.redBao_lis {
				width: 80%;
				margin-left: 10%;
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.redBao_lis li {
				/*width: 7.5rem;*/
				/*height: 6.6rem;*/
				width: 47%;
				margin-top: 1rem;
			}
			.redBao_lis img {
				width: 100%;
				height: 100%;
			}
			/* 免费领取 */
			.share_img {
				width: 6rem;
				/*height: 4.2rem;*/
				margin-top: .5rem;
			}
		</style>
	</head>
	<body>
		<div id="swrapper">
			<ul class="redBao_lis">
				<li>
					<a href="html/hongBao.html">
						<img src="images/homePage/10.png" alt="" />
					</a>
				</li>
				<li>
					<a href="html/hongBao.html">
						<img src="images/homePage/30.png" alt="" />
					</a>
				</li>
				<li>
					<a href="html/hongBao.html">
						<img src="images/homePage/100.png" alt="" />
					</a>
				</li>
				<li>
					<a href="html/hongBao.html">
						<img src="images/homePage/500.png" alt="" />
					</a>
				</li>
			</ul>
			<!--点击免费领取-->
			<img class="share_img" src="images/homePage/share.png" alt="" />
		</div>
		<footer>
			<ul id="footer">
				<li>
					<a href="index.html">抢红包</a>
				</li>
				<li>
					<a href="html/agency.html">代理</a>
				</li>
				<li>
					<a href="html/server.html">客服</a>
				</li>
				<li>
					<a href="html/center.html">我的</a>
				</li>
			</ul>
		</footer>
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		!(function(doc, win) {
			var docEle = doc.documentElement,
				evt = "onorientationchange" in window ? "orientationchange" : "resize",
				fn = function() {
					var width = docEle.clientWidth;
					width && (docEle.style.fontSize = 20 * (width / 375) + "px");
				};
			win.addEventListener(evt, fn, false);
			doc.addEventListener("DOMContentLoaded", fn, false);
		}(document, window));
		
		// 抢红包
		$('.redBao_lis li').click(function () {
			alert("去充值,充值成功跳转"+$(this).index());
		});
		// 免费领取
		$('.share_img').click(function () {
			alert('恭喜抢到了88元红包。')
		});
	</script>
</html>
